<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我要卖房</title>
    <link rel="stylesheet" href="css/Global2.css" />
    <link rel="stylesheet" href="css/style2.css" />
    <style>
        body {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: default;
      }
      .submit-btn {
        width: 200px;
        margin: auto;
      }
      .estate_list,
      .address_list,
      .unit_list,
      .house_list {
        display: none;
        position: absolute;
        left: 110px;
        width: 300px;
        background: #eee;
        z-index: 1;
        padding: 15px 20px;
        border: 1px solid #dfdfdf;
        font-size: 14px;
        height: 360px;
        overflow-y: auto;
      }
      .estate_list li,
      .address_list li,
      .unit_list li,
      .house_list li {
        margin-bottom: 10px;
      }
      .estate_list li:hover,
      .address_list li:hover,
      .unit_list li:hover,
      .house_list li:hover {
        color: red;
        cursor: pointer;
      }
    </style>
</head>

<body>
        
    <div class="tc" style="padding:1rem 2rem;">
        <h2 class="f40 fw8 text-red h-70">如何出售您的房产？</h2>
        <p class="mb-10 f14">
            选择您希望出售房产的详细数据。提交后，我们的房产经纪人会在24小时内联系您，帮您登记发布房产的出售信息。
        </p>
    </div>
    <div class="bg-grey">
        <div class="">
            <form action="" class="form form1" id="myform">
                <div class="item">
                    <label>区域</label>
                    <div class="input w120 mr-15">
                        <select class="input w130 g9" id="district"></select>
                    </div>
                </div>
                <div class="item">
                    <label>小区名称</label>
                    <input class="" type="text" placeholder="请选择" id="estate_name" autocomplete="off" />
                    <span class="alert">不能为空！</span>
                    <ul class="estate_list"></ul>
                </div>
                <div class="item">
                    <label>具体地址</label>
                    <div class="dib address_wrap">
                        <input class="" type="text" placeholder="请选择" id="address_name" disabled />
                    </div>
                    <span class="alert">不能为空！</span>
                    <ul class="address_list"></ul>
                    <ul class="unit_list"></ul>
                    <ul class="house_list"></ul>
                </div>
                <div class="item">
                    <label>产别</label>
                    <div class="input w120 mr-15">
                        <select class="input w130 g9" id="ownerShip"></select>
                    </div>
                </div>
                <div class="item">
                    <label>姓名</label>
                    <input type="text" placeholder="如何称呼您" id="customer_name" autocomplete="off" />
                </div>
                <div class="item">
                    <label>联系方式</label>
                    <input class="" type="text" value="" placeholder="请输入" id="telephone" autocomplete="off" />
                </div>
                <div class="item">
                    <label>期望售价</label>
                    <input class="" type="text" placeholder="请输入" id="expected_amount" autocomplete="off" />
                    万元
                </div>
                <div class="item">
                    <label>面积</label>
                    <input class="" type="text" placeholder="请输入" id="acreage" autocomplete="off" />
                    ㎡
                </div>
                <p class="w130 m-auto submit-btn">发布房源</p>
            </form>
        </div>
    </div>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
    var commomUrl = "https://rht.jfzh.com.cn/",
        info = JSON.parse(localStorage.getItem("userInfo")), //判断是否登录
        // info = true, //判断是否登录
        estateCode = null,
        unitCode = null,
        unitName = null,
        buildingCode = null,
        buildingName = null,
        houseCode = null,
        houseName = null,
        acreage = null,
        customer_name = null,
        district_id = null,
        estate_name = null,
        expected_amount = null,
        property_type = null,
        Data = getBasicData();

    if (!Data) {
        alert("请求数据出错,请联系管理员！");
    }
    //初始化区域数据
    $("#district").html(addOption(Data.districtList));
    //初始化产别数据
    $("#ownerShip").html(addOption(Data.ownerShipList));

    //判断未登录状态,禁用表单元素
    if (info) {
        $("select,input").attr("disabled", false);
    } else {
        $("select,input").attr("disabled", true);
    }
    //判断是否登录
    $(".form").click(function() {
        if (info) {
            $(".mask").hide();
        } else {
            $(".mask").show();
        }
    });
    //小区开始
    $("#estate_name").keyup(function() {
        var data = searchDistrictToSell({ name: $(this).val() }),
            html = "";

        if (data.length) {
            $.each(data, function(index, val) {
                html += '<li data-code="' + val.code + '">' + val.name + "</li>";
            });
        }
        $(".estate_list").html(html).show();
    });
    $(".estate_list").on("click", "li", function() {
        var data = [],
            html = "";
        estateCode = $(this).data("code");
        $("#estate_name").val($(this).text());

        //判断是否选择小区
        if (estateCode) {
            data = searchAddressToSell({ districtId: estateCode, pageSize: 600 });
        } else {
            alert("请先选择小区");
        }

        //根据小区编号获取楼栋列表数据
        if (data.length) {
            $.each(data, function(index, val) {
                html +=
                    '<li data-code="' +
                    val.buildingCode +
                    '">' +
                    val.buildingName +
                    "</li>";
            });
        }
        $(".address_list").html(html);
    });
    //小区结束

    //楼栋开始
    $(".address_wrap").click(function() {
        $(".address_list").show();
    });

    $(".address_list").on("click", "li", function() {
        var data = [],
            html = "";
        buildingCode = $(this).data("code");
        buildingName = $(this).text();
        $("#address_name").val(buildingName);

        //判断是否选择小区
        data = searchUnitToSell({ buildingId: buildingCode, pageSize: 600 });

        //根据小区编号获取楼栋列表数据
        if (data.length) {
            $.each(data, function(index, val) {
                html +=
                    '<li data-code="' + val.unitCode + '">' + val.unitName + "</li>";
            });
        }

        $(".address_list").hide();
        $(".unit_list").html(html).show();
    });
    //楼栋结束
    //单元开始
    $(".unit_list").on("click", "li", function() {
        var data = [],
            html = "";

        unitCode = $(this).data("code");
        unitName = $(this).text();

        $("#address_name").val(buildingName + " " + unitName);

        data = searchHouseToSell({ unitId: unitCode, pageSize: 600 });

        //根据小区编号获取楼栋列表数据
        if (data.length) {
            $.each(data, function(index, val) {
                html +=
                    '<li data-code="' +
                    val.houseCode +
                    '">' +
                    val.houseName +
                    "</li>";
            });
        }
        $(".unit_list").hide();
        $(".house_list").html(html).show();
    });
    //单元结束
    $(".house_list").on("click", "li", function() {
        houseCode = $(this).data("code");
        houseName = $(this).text();

        $("#address_name").val(buildingName + " " + unitName + " " + houseName);
        $(".house_list").hide();
    });

    $(document).click(function() {
        $(".estate_list").hide();
    });
    // 提交表单信息
    $(".submit-btn").click(function(event) {
        var datas = null;
        (acreage = $("#acreage").val()),
        (customer_name = $("#customer_name").val()),
        (telephone = $("#telephone").val()),
        (district_id = $("#district").val()),
        (estate_name = $("#estate_name").val()),
        (expected_amount = $("#expected_amount").val()),
        (property_type = $("#ownerShip").val());

        if (!info) {
            $(".mask").show();
        } else if (!district_id) {
            alert("请选择购房区域");
        } else if (!$("#estate_name").val()) {
            alert("请选择小区");
        } else if (!$("#address_name").val()) {
            alert("请选择具体住址");
        } else if (!property_type) {
            alert("请选择产别");
        } else if (!customer_name) {
            alert("请输入您的姓名");
        } else if (!expected_amount) {
            alert("请输入您期望的售价");
        } else if (!acreage) {
            alert("请输入房屋面积");
        } else {
            $(".mask").hide();
            datas = {
                acreage: acreage,
                building_id: buildingCode,
                building_name: buildingName,
                customer_name: customer_name,
                district_id: district_id,
                estate_id: estateCode,
                estate_name: estate_name,
                expected_amount: expected_amount,
                house_id: houseCode,
                house_name: houseName,
                is_sell: 1,
                open_id: info.customerOpenId,
                property_type: property_type,
                source: 2,
                telephone: telephone,
                unit_id: unitCode,
                unit_name: unitName,
            };
            addIntention(datas);
        }
    });

    //获取房间号
    function searchHouseToSell(datas) {
        var result = null;
        $.ajax({
            contentType: "application/json",
            type: "post",
            url: commomUrl + "KeHouse/SearchHouseToSell",
            cache: false,
            data: JSON.stringify(datas), //重点必须为一个变量如：data
            dataType: "json",
            async: false,
            success: function(data) {
                // console.log(data + '获取房间号')
                if (data.code == 200) {
                    result = data.data;
                }
            },
        });
        return result;
    }

    //获取单元楼号
    function searchUnitToSell(datas) {
        var result = null;
        $.ajax({
            contentType: "application/json",
            type: "post",
            url: commomUrl + "KeUnit/SearchUnitToSell",
            cache: false,
            data: JSON.stringify(datas), //重点必须为一个变量如：data
            dataType: "json",
            async: false,
            success: function(data) {
                // console.log(data + '获取单元楼号')
                if (data.code == 200) {
                    result = data.data;
                }
            },
        });
        return result;
    }

    //获取楼栋信息列表
    function searchAddressToSell(datas) {
        var result = null;
        $.ajax({
            contentType: "application/json",
            type: "post",
            url: commomUrl + "KeBuilding/SearchAddressToSell",
            cache: false,
            data: JSON.stringify(datas), //重点必须为一个变量如：data
            dataType: "json",
            async: false,
            success: function(data) {
                // console.log(data + '获取楼栋信息列表')
                if (data.code == 200) {
                    result = data.data;
                }
            },
        });
        return result;
    }

    //查询小区
    function searchDistrictToSell(datas) {
        var result = null;
        $.ajax({
            contentType: "application/json",
            type: "post",
            url: commomUrl + "keEstate/SearchDistrictToSell",
            cache: false,
            data: JSON.stringify(datas), //重点必须为一个变量如：data
            dataType: "json",
            async: false,
            success: function(data) {
                // console.log(data.data + '查询小区')
                if (data.code == 200) {
                    result = data.data;
                }
            },
        });
        return result;
    }

    //提交卖房信息
    function addIntention(datas) {
        $.ajax({
            contentType: "application/json",
            type: "post",
            url: commomUrl + "houseintention/addIntention",
            cache: false,
            data: JSON.stringify(datas), //重点必须为一个变量如：data
            dataType: "json",
            async: false,
            success: function(data) {
                console.log(data);
                if (data.code == 200) {
                    // result=data.data
                    alert("提交成功!");
                    document.getElementById("myform").reset();
                }
            },
        });
    }

    //获取基础数据
    function getBasicData() {
        var result = null;
        $.ajax({
            contentType: "application/json",
            type: "get",
            url: commomUrl + "BasicDataApi/GetBasicData",
            cache: false,
            dataType: "json",
            async: false,
            success: function(data) {
                // console.log(data.data)
                if (data.code == 200) {
                    result = data.data;
                }
            },
        });
        return result;
    }

    function addOption(obj) {
        var html = "<option selected>不限</option>";
        $.each(obj, function(index, val) {
            html += "<option value=" + val.id + ">" + val.name + "</option>";
        });
        return html;
    }
    </script>
</body>

</html>